<template>
      <div class="container">
            <el-table ref="table"
                  class="table"
                  v-loading="loading"
                  :data="dataSource"
                  border
                  highlight-current-row
                  :height="height"
                  @current-change="onCurrentChange">

                  <template v-if="rowIndex">
                        <el-table-column type="index"
                              width="50">
                        </el-table-column>
                  </template>

                  <el-table-column v-for="(col,index) in showCols"
                        :width="col.width"
                        :key="index"
                        :prop="col.prop"
                        :label="col.text"
                        :formatter="col.formatter">
                  </el-table-column>

                  <slot></slot>
            </el-table>
      </div>
</template>

<script>
import { Table } from 'element-ui'

export default {
      props: {
            rowIndex: Boolean,
            loading: Boolean,
            needEndCol: Boolean,
            height: String,
            cols: {
                  type: Array,
                  default: () => []
            },
            dataSource: {
                  type: Array,
                  default: () => []
            }
      },
      computed: {
            showCols() {
                  return this.cols.filter(col => col.hide !== true)
            }
      },
      updated() {
            this.$emit('updated')
      },
      methods: {
            onCurrentChange(cp) {
                  this.$emit('onCurrentChange', cp)
            }
      }
}
</script>

<style scoped>
.container {
      padding-top: 20px;
}

.container .table {
      width: 100%;
}
</style>